<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
        }

        .box {
            width: 1000px;
            margin: 0 auto;
        }

        input {
            width: 100%;
            height: 40px;
        }

        textarea {
            width: 100%;
        }

        .item {
            padding: 10px 0;
            border-bottom: 1px solid #919191;
        }

        .content {
            margin-top: 5px;
        }

        .remove {
            float: right;
        }
    </style>
</head>

<body>
    <div id="root">

    </div>
</body>
<script src="./react.js"></script>
<script src="./react-dom.js"></script>
<!-- 用来将jsx语法转化为js语法 -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.js"></script>
<script type="text/babel">
    class App extends React.Component {
        state = {
            msg: null
        }
        render() {
            return (
                <div className='box'>
                    <One getMsg={(msg) => {
                        console.log(msg);
                        this.setState({
                            msg: msg
                        }, () => {
                            this.setState({
                                msg: null
                            })
                        })
                    }} />
                    <Child msg={this.state.msg} />
                </div>
            )
        }
    }
    class One extends React.Component {
        state = {
            name: '',
            content: ''
        }
        render() {
            let { name, content } = this.state;
            return (
                <div>
                    <div>
                        <h2>评论人:</h2>
                        <div>
                            <input type="text" value={name} onChange={(e) => {
                                this.setState({
                                    name: e.target.value
                                })
                            }} />
                        </div>
                    </div>
                    <div>
                        <h2>评论内容:</h2>
                        <div>
                            <textarea rows="10" value={content} onChange={(e) => {
                                this.setState({
                                    content: e.target.value
                                })
                            }}></textarea>
                        </div>
                    </div>
                    <button onClick={() => this.send()}>发表</button>
                </div>

            )
        }
        send() {
            let { name, content } = this.state;
            //子组件调用父组件传递过来的方法并将数据传递给父组件
            this.props.getMsg({ name, content });
            this.setState({
                name: '',
                content: ''
            })
        }
    }
    class Child extends React.Conponent {
        state = {
            list: [
                {
                    name: '小明',
                    content: '学习使我快乐!!!'
                }, {
                    name: '小红',
                    content: '好好学习,天天向上~~'
                }
            ]
        }
        render() {
            let { list } = this.state;
            console.log(this.props.msg);
            if (this.props.msg !== null) {
                list.push(this.props.msg)
            }
            return (
                <div>
                    <h1>留言板</h1>
                    <div>
                        {
                            list.map((item, index) => {
                                return (
                                    <div key={index} className='item'>
                                        <div>
                                            作者:{item.name}
                                        </div>
                                        <div className='content'>
                                            内容:{item.content}
                                            <button className='remove' onClick={() => {
                                                list.splice(index, 1)
                                                this.setState({
                                                    list: list
                                                })
                                            }}>删除
                                            </button>
                                        </div>

                                    </div>
                                )
                            })
                        }
                    </div>
                </div>
            )
        }
    }
    ReactDOM.render(<App />, document.getElementById('root'))
</script>

</html>